<template>

	<view class="mycenter">

		<!-- 背景部分 -->
		<view class="mycenter-bgc">
			<!-- 状态栏空的占高度用 -->
			<view class="status_bar">
			</view>

			<!-- 上面头像部分 -->
			<view class="mycenter-touxiang">
				<view class="mycenter-left">
					<navigator url="/pages/loginlrx/loginlrx">
						<image class="mycenter-leftimages" src="../../static/images/lrx/image_touxiang@3x.png"></image>
					</navigator>
				</view>

				<view v-if="isLogin==false" class="mycenter-middle">
					<view class="mycenter-middlename">
						登录享受更多精彩
					</view>
					<navigator url="/pages/loginlrx/loginlrx">
						<view class="mycenter-middleduihuan">
							立即登录
						</view>
					</navigator>

				</view>
				<view v-else class="mycenter-middle">
					<view class="mycenter-middlename">
						{{username}}
					</view>
					<view class="mycenter-middleduihuan" @tap="exitLogin">
						退出登录
					</view>
				</view>

				<view class="mycenter-right">
					<navigator :url="isLogin?'/pages/settinglrx/settinglrx':'/pages/loginlrx/loginlrx'">
						<image class="righticon" src="../../static/images/lrx/icon_minesezhi@2x.png" mode=""></image>
					</navigator>
					<image class="righticon" src="../../static/images/lrx/icon_minexinxi@2x.png" mode=""></image>
				</view>

			</view>


			<!-- 关注粉丝点赞 -->
			<view class="mycenter-fensi">
				<view class="mycenter-fensiitem">
					<view>{{attention}}</view>
					<view>关注</view>
				</view>
				<view class="mycenter-fensiitem">
					<view>{{fans}}</view>
					<view>粉丝</view>
				</view>
				<view class="mycenter-fensiitem">
					<view>{{likes}}</view>
					<view>获赞</view>
				</view>
				<navigator :url="isLogin?'/pages/collectinglrx/collectinglrx':'/pages/loginlrx/loginlrx'">
					<view class="mycenter-fensiitem">
						<view>{{collet}}</view>
						<view>收藏</view>
					</view>
				</navigator>

			</view>

			<!-- 绝对定位黄色部分 -->
			<view class="huiyuanyellow">
				<view class="huiyuanyellow-left">
					<view class="huiyuanyellow-title">
						赤兔会员
					</view>
					<view class="huiyuanyellow-white">
						各大门店满减
					</view>
				</view>
				<view class="huiyuanyellow-middle">
					<view class="huiyuanyellow-title">
						赤兔会员专属门店
					</view>
					<view class="huiyuanyellow-white">
						专享服务更加放心
					</view>
				</view>
				<view class="huiyuanyellow-right">
					<view class="huiyuanyellow-title">
						会员折扣优惠
					</view>
					<view class="huiyuanyellow-white">
						会员享受30%折扣
					</view>
				</view>

			</view>
		</view>


		<!-- 浏览历史 -->
		<view class="mycenter-history">
			<view class="mycenter-historyitem">
				<image class="historyitem-img" src="../../static/images/lrx/icon_llls.png" mode=""></image>
				<text>浏览历史</text>
			</view>

			<view class="mycenter-historyitem">
				<image class="historyitem-img" src="../../static/images/lrx/icon_fukuan.png" mode=""></image>
				<text>待付款</text>
			</view>

			<navigator :url="isLogin?'/pages/comments/comments':'/pages/loginlrx/loginlrx'">
				<view class="mycenter-historyitem">
					<image class="historyitem-img" src="../../static/images/lrx/icon_dpj.png" mode=""></image>
					<text>待评价</text>
				</view>
			</navigator>

			<navigator :url="isLogin?'/pages/searchOrder/searchOrder':'/pages/loginlrx/loginlrx'">
				<view class="mycenter-historyitem">
					<image class="historyitem-img" src="../../static/images/lrx/icon_dingdan.png" mode=""></image>
					<text>订单</text>
				</view>
			</navigator>

		</view>


		<!-- 我的钱包 -->
		<view class="mycenter-qianbao">

			<!-- 标题 -->
			<navigator :url="isLogin?'/pages/myWallet/myWallet':'/pages/loginlrx/loginlrx'">
				<view class="mycenter-qianbaotitle">
					<text>我的钱包</text>
					<image class="qiaobaoimg" src="../../static/images/lrx/button_toright.png"></image>
				</view>
			</navigator>

			<!-- 数量 -->
			<view class="mycenter-shuliangtongji">
				<view class="mycenter-item">
					<view class="mycenter-num">
						{{balance}}
					</view>
					<view class="mycenter-gray">
						现金余额（元）
					</view>
				</view>

				<view class="mycenter-item">
					<view class="mycenter-num">
						{{redPacket}}
					</view>
					<view class="mycenter-gray">
						会员红包（个）
					</view>
				</view>
				<view class="mycenter-item">
					<view class="mycenter-num">
						{{discountCoupon}}
					</view>
					<view class="mycenter-gray">
						优惠券（张）
					</view>
				</view>
			</view>
		</view>

		<!-- 我的爱车 -->
		<view v-if="isLogin==true" class="mycenter-mylovecar">

			<view class="mylovecar-title">
				<view class="leftmycar">我的爱车</view>
				<navigator url="/pages/bjzlfq/bjzlfq">
					<view class="mylovecar-guanli">
						<text>管理</text>
						<image class="guanliimages" src="../../static/images/lrx/button_toright.png" mode=""></image>
					</view>
				</navigator>

			</view>


			<!-- 图片和标题 -->
			<view class="mylovecar-carphoto">
				<image class="mylovecarcar" src="../../static/images/lrx/image_aodi.png" mode=""></image>
				<view class="">
					大众奥迪-A6L-新能源
				</view>
			</view>

		</view>

		<!-- 常用功能 -->
		<view class="funtions">
			<!-- 标题 -->
			<view class="funtions-title">
				常用功能
			</view>

			<!-- 功能列表 -->
			<view class="funtions-list">
				<view class="funtions-listitem">
					<image class="funtions-listitemimg" src="../../static/images/lrx/icon_wodekouobei.png" mode="">
					</image>
					<view>我的口碑</view>
				</view>
				<view class="funtions-listitem">
					<image class="funtions-listitemimg" src="../../static/images/lrx/icon_guanzhuchexing.png" mode="">
					</image>
					<view>关注车型</view>
				</view>
				<view class="funtions-listitem">
					<image class="funtions-listitemimg" src="../../static/images/lrx/icon_wodechequan.png" mode="">
					</image>
					<view>我的车圈</view>
				</view>
				<view class="funtions-listitem">
					<image class="funtions-listitemimg" src="../../static/images/lrx/icon_zuopingguanli.png" mode="">
					</image>
					<view>作品管理</view>
				</view>
				<view class="funtions-listitem">
					<image class="funtions-listitemimg" src="../../static/images/lrx/icon_jifenshangcheng.png" mode="">
					</image>
					<view>积分商城</view>
				</view>
			</view>
		</view>

	</view>


</template>

<script>
	import {
		createNamespacedHelpers
	} from "vuex";
	let {
		mapActions,
		mapMutations,
		mapState
	} = createNamespacedHelpers('users')
	export default {
		data() {
			return {
				// 标志用户是否登录，初始为未登录
				isLogin: false,
				username: '********',
				balance: "---",
				redPacket: "---",
				discountCoupon: "---",
				attention: "--",
				fans: "--",
				likes: "--",
				collet: "--",

			}
		},
		onShow() {
			this.isLoginsystem();
		},
		computed: {
			...mapState(["myWallet"])
		},
		methods: {
			...mapActions(["userInformation"]),
			...mapMutations(["setUserId"]),
			// 根据token判断是否登录
			async isLoginsystem() {
				let data = uni.getStorageSync("token");
				let userId=uni.getStorageSync("id");
				if (data&&userId) {
					this.isLogin = true;
				} else {
					this.isLogin = false;
				}
			},
			exitLogin() {
				uni.removeStorage({
					key: 'token',
					success: () => {
						this.isLogin = false;
					}
				});
				uni.removeStorage({
					key: 'id',
					success: () => {
						this.isLogin = false;
					}
				});
			}
		},
		watch: {
			isLogin: {
				async handler(val) {
					// 如果是已登录的状态
					if (val) {
						this.setUserId(uni.getStorageSync("id"));
						let res = await this.userInformation();
						if (res.custom) {
							this.username = res.custom.name;
							this.balance = this.myWallet.balance;
							this.redPacket = this.myWallet.redPacket;
							this.discountCoupon = this.myWallet.discountCoupon;
							this.attention = "1";
							this.fans = "0";
							this.likes = "352";
							this.collet = "1";
						}
					}
				},
				immediate: true
			},
			myWallet: {
				handler() {
					this.balance = this.myWallet.balance;
					this.redPacket = this.myWallet.redPacket;
					this.discountCoupon = this.myWallet.discountCoupon;
				},
				deep: true,
				immediate: true
			}
		}
	}
</script>

<style scoped lang="scss">
	.mycenter {

		// 上面背景图部分
		.mycenter-bgc {
			width: 100%;
			height: 510rpx;
			background-image: url(../../static/images/lrx/image__hongsebeij.png);
			background-size: 750rpx 510rpx;

			.status_bar {
				height: var(--status-bar-height);
				width: 100%;
				height: 130rpx;
			}

			// 积分兑换头像栏
			.mycenter-touxiang {
				width: 690rpx;
				height: 130rpx;
				margin: 0 auto;
				display: flex;
				justify-content: space-between;

				// 左边的头像
				.mycenter-left {
					width: 150rpx;
					height: 150rpx;
					padding-bottom: 20rpx;

					.mycenter-leftimages {
						width: 104rpx;
						height: 104rpx;
					}
				}

				// 中间的用户信息
				.mycenter-middle {
					width: 420rpx;
					height: 150rpx;
					color: white;
					padding: 10rpx 30rpx 0rpx 10rpx;

					.mycenter-middlename {
						font-size: 30rpx;
					}

					.mycenter-middleduihuan {
						width: 150rpx;
						height: 40rpx;
						background-color: rgba(27, 26, 26, 0.21);
						border-radius: 30rpx;
						font-size: 24rpx;
						padding: 0rpx 8rpx;
						text-align: center;
						line-height: 40rpx;
						margin-top: 10rpx;
					}
				}

				// 右边的小图标
				.mycenter-right {
					width: 140rpx;
					height: 120rpx;
					display: flex;
					justify-content: space-between;

					.righticon {
						width: 60rpx;
						height: 60rpx;
						margin-top: 20rpx;
					}
				}

			}

			//获赞关注
			.mycenter-fensi {
				height: 86rpx;
				width: 600rpx;
				margin: 0 auto;
				justify-content: space-between;
				color: white;
				display: flex;

				.mycenter-fensiitem {
					text-align: center;
					font-size: 24rpx;
					padding: 10rpx;
				}
			}

			// 黄色部分绝对定位
			.huiyuanyellow {
				width: 690rpx;
				height: 154rpx;
				margin: 0rpx auto;
				display: flex;
				justify-content: space-between;
				background-size: cover;
				padding: 20rpx 0rpx;

				.huiyuanyellow-title {
					font-size: 28rpx;
					font-weight: 700;
					color: #9c744b;
				}

				.huiyuanyellow-white {
					font-size: 22rpx;
					padding-top: 10rpx;
					color: white;
				}

				.huiyuanyellow-left {
					border-right: 2px solid white;
					height: 80rpx;
					padding-right: 20rpx;
					padding: 0rpx 20rpx;

				}

				.huiyuanyellow-middle {
					border-right: 2px solid white;
					height: 80rpx;
					margin-left: 10rpx;
					padding: 0rpx 20rpx;
				}

				.huiyuanyellow-right {
					padding: 0rpx 20rpx;
				}
			}
		}

		// 浏览历史
		.mycenter-history {
			background-color: white;
			width: 690rpx;
			margin: 30rpx auto;
			padding: 20rpx;
			border-radius: 30rpx;
			display: flex;
			justify-content: space-around;

			.mycenter-historyitem {
				width: 120rpx;
				padding: 10rpx;
				text-align: center;
				font-size: 24rpx;

				.historyitem-img {
					width: 90rpx;
					height: 90rpx;
				}
			}
		}

		// 我的钱包
		.mycenter-qianbao {
			width: 690rpx;
			margin: 0 auto;
			padding: 30rpx;
			border-radius: 30rpx;
			background-color: white;

			.mycenter-qianbaotitle {
				height: 50rpx;
				display: flex;
				justify-content: space-between;
				font-size: 34rpx;
				font-weight: 700;

				.qiaobaoimg {
					margin-top: 10rpx;
					width: 30rpx;
					height: 30rpx;
				}
			}

			// 数量
			.mycenter-shuliangtongji {
				display: flex;
				margin-top: 10rpx;
				justify-content: space-between;

				.mycenter-item {
					.mycenter-num {
						font-size: 40rpx;
						font-weight: 700;
						color: #f5610c;
					}

					.mycenter-gray {
						font-size: 24rpx;
						color: #b6b6b6;
					}

				}
			}
		}

		// 我的爱车
		.mycenter-mylovecar {
			width: 690rpx;
			margin: 30rpx auto;
			border-radius: 30rpx;
			padding: 30rpx 10rpx;
			background-color: white;

			.mylovecar-title {
				display: flex;
				padding: 20rpx;
				justify-content: space-between;

				.leftmycar {
					font-size: 34rpx;
					font-weight: 700;
				}

				.mylovecar-guanli {
					display: flex;
					font-size: 28rpx;

					.guanliimages {
						width: 30rpx;
						height: 30rpx;
						margin-top: 8rpx;
					}

				}
			}

			// 爱车图片
			.mylovecar-carphoto {
				text-align: center;
				font-size: 30rpx;

				.mylovecarcar {
					width: 600rpx;
					height: 250rpx;
				}

			}
		}

		// 常用功能
		.funtions {
			width: 690rpx;
			margin: 30rpx auto;
			border-radius: 30rpx;
			background-color: white;
			padding: 30rpx;
			margin-bottom: 30rpx;

			.funtions-title {
				font-size: 34rpx;
				font-weight: 700;
			}

			// 常用功能列表
			.funtions-list {
				display: flex;
				justify-content: space-between;

				.funtions-listitem {
					width: 100rpx;
					padding: 20rpx 0rpx;
					text-align: center;
					font-size: 24rpx;

					.funtions-listitemimg {
						width: 60rpx;
						height: 60rpx;
					}
				}
			}

		}
	}
</style>